<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>主页</title>
</head>

<body class="bg-gray-100 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <a href="#" class="text-xl font-bold text-gray-800">主页</a>
        <div class="space-x-4">
            <a href="#" class="text-gray-600 hover:text-gray-800">关于我们</a>
            <a href="#" class="text-gray-600 hover:text-gray-800">服务</a>
            <a href="#" class="text-gray-600 hover:text-gray-800">联系我们</a>
        </div>
    </div>
</nav>

<!-- 主内容 -->
<main class="container mx-auto px-4 py-8">
    <section class="text-center">
        <h1 class="text-4xl font-bold text-gray-800 mb-4">欢迎来到我们的网站</h1>
        <p class="text-gray-600 mb-8">在这里，你可以发现更多精彩内容。</p>
        <a href="#"
           class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">了解更多</a>
    </section>

    <section class="mt-16">
        <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">我们的服务</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-md shadow-md">
                <i class="fas fa-cogs text-4xl text-blue-500 mb-4"></i>
                <h3 class="text-xl font-bold text-gray-800 mb-2">专业服务</h3>
                <p class="text-gray-600">我们提供专业的解决方案，满足你的需求。</p>
            </div>
            <div class="bg-white p-6 rounded-md shadow-md">
                <i class="fas fa-chart-line text-4xl text-blue-500 mb-4"></i>
                <h3 class="text-xl font-bold text-gray-800 mb-2">数据分析</h3>
                <p class="text-gray-600">深入分析数据，为你提供有价值的见解。</p>
            </div>
            <div class="bg-white p-6 rounded-md shadow-md">
                <i class="fas fa-headset text-4xl text-blue-500 mb-4"></i>
                <h3 class="text-xl font-bold text-gray-800 mb-2">优质支持</h3>
                <p class="text-gray-600">我们的团队随时为你提供优质的支持服务。</p>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-white shadow-md mt-16">
    <div class="container mx-auto px-4 py-6 text-center text-gray-600">
        &copy; 2025 版权所有. 保留所有权利.
    </div>
</footer>
</body>

</html>
